<template>
  <view class="content">
    <view class="head">
      <!-- <view class="head-title">一区</view> -->
      <view class="select-con">
        <Selectcon :hasbgimg="true" :hasitembg="true" :optionlist="optionlist" @choose="choosevalue"></Selectcon>
      </view>  
    </view>
    <map id="map" :latitude="latitude" :longitude="longitude" :markers="markers" scale="16" :show-compass='true'
      :circles="circles" :controls="controls" show-location>
    </map>
    <view class="option">
      <view class="option-item">
        <image src="../../static/image/camera-drone.png" mode=""></image>
        <view class="option-item-value">请求无人机环视</view>
      </view>
      <view class="option-item" @click="toreport">
        <image src="../../static/image/fire.png" mode=""></image>
        <view class="option-item-value">上报火情</view>
      </view>
    </view>
  </view>
</template>

<script>
  import Selectcon from "../../components/Selectcon/Selectcon.vue"
  
  export default {
    data() {
      return {
        longitude: 116.39758,
        latitude: 39.909263,
        optionlist: [{
          id: 1,
          text: '一区'
        }, {
          id: 2,
          text: '二区'
        }, {
          id: 3,
          text: '三区'
        }, {
          id: 4,
          text: '四区'
        }, {
          id: 5,
          text: '五区'
        }],
        markers: [{
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          iconPath: '/static/image/flat.png', // 自定义图标路径
          title: 'Marker 1',
          width: 25, // 图标宽度，单位为像素
          height: 25, // 图标高度，单位为像素
        }],
      }
    },
    components: {
      Selectcon
    },
    onLoad() {
      this.getAddress();
    },
    methods: {
      toreport() {
        uni.navigateTo({
          url:'/pages/report/report'
        })
      },
      choosevalue(value) {
        console.log("传过来的值为：",value);
      },
      // 通过逆向编码,可以获取用户的地理位置（详细信息）
      getAddress() {
        const that = this
        uni.request({
          url: 'https://restapi.amap.com/v3/geocode/regeo',
          method: 'GET',
          data: {
            location: this.longitude + ',' + this.latitude,
            key: '6f0bdc094c8980af9171b369b919ea21'
          },
          success(res) {
            console.log(res)
            if (res.data.regeocode.formatted_address) {
              if (that.isadd == 1) {
                that.form.address = res.data.regeocode.formatted_address
              }
            }
          }
        })
      },
    }
  }
</script>

<style>
  #map {
    /*地图(容器)显示大小*/
    width: 100%;
    height: 750rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    position: relative;
    font-size: 36rpx;
    color: #8f8f94;
  }
  .head {
    width: 100%;
    height: 100rpx;
  }
  .head-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30rpx;
    line-height: 100rpx;
    color: #000;
    font-weight: 600;
  }
  .select-con {
    position: absolute;
    right: 20rpx;
    width: 160rpx;
    height: 70rpx;
    margin-top: 20rpx;
  }
  .option {
    width: 650rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    padding-bottom: 60rpx;
  }
  .option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 300rpx;
    height: 175rpx;
    color: #fff;
    border-radius: 20rpx;
    background-color: #62738b;
  }
  .option-item image {
    width: 80rpx;
    height: 80rpx;
  }
</style>
